<template>
    <div class="container">
        <div class="main">
            <div class="headline">
                <img src="http://www.chituyc.com/RedRabbitIndex/pic/index/logo.png" alt="">
            </div>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="auto"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" :prefix-icon="User" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock" />
                </el-form-item>

                <el-form-item>
                    <!-- <el-button type="primary" @click="login1(ruleFormRef)">登录</el-button>
                    <el-button @click="">注册</el-button> -->
                    <el-button type="primary" style="width: 100%;" @click="login1(ruleFormRef)">立即注册</el-button>
                    <router-link to="/login" class="router-test">
                        <p style="color: #3f9eff;">已有账号？立即登录</p>
                    </router-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { Avatar, User, Lock } from "@element-plus/icons-vue";
import { login } from '../apis/user'

const ruleFormRef = ref<FormInstance>();
const rules = {
    username: { required: true, message: '请输入用户名', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' },
}

const ruleForm = reactive({
    username: '',
    password: '',
})

const login1 = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            console.log(ruleForm);
            const a = `username=${ruleForm.username}&password=${ruleForm.password}&`
            const res = await login(a)
            console.log(res)
        } else {
            console.log('error submit!')
            return false
        }
    })

}


</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100vh;
    background: #f0f2f5 url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg) no-repeat center 110px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.main {
    width: 30%;
    margin: 30vh 34%;

}

.headline {
    width: 50%;
    margin: 20px auto;

    img {
        width: 100%;
        // height: 100%;
        margin-left: 20px;
    }
}
</style>
